<template>
  <div class="containerbox">
    <el-container>
      <el-aside>
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" v-for="(item, i) in asideList" :key="i">
          <el-submenu :index="i + 1 + ''">
            <template slot="title">
              <span slot="title">{{ item.title }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item :index="'1-' + i + 1" v-for="(v, i) in item.children" :key="i + 10" @click="adhandler(v.path)">{{ v.title }}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      asideList: [
        {
          title: '秒杀专区',
          path: '',
          children: [
            { title: '秒杀活动列表', path: '' },
            { title: '时间段列表', path: '' }
          ]
        },
        {
          title: '广告管理',
          path: '',
          children: [
            { title: '广告列表', path: '/runs/adlist' },
            { title: '添加广告', path: '/runs/Advertising' }
          ]
        }
      ]
    }
  },
  methods: {
    adhandler(path) {
      this.$router.push(path)
    }
  }
}
</script>

<style lang="less" scoped>
.el-aside {
  background: #ccc;
  width: 250px !important;
}
.el-main {
  background: #fff;
}
.shrinkBtn {
  background: #ccc;
  width: 100%;
  height: 60px;
  .el-switch {
    margin: 20px 0 0 16px;
  }
}
.el-menu {
  border: none;
}
.el-menu-item {
  padding-left: 60px !important;
}
</style>
